
<template>
  <div class="articlelist-container">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in articleList" :key="item.art_id.toString()" @click="godetail(item.art_id.toString())">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div>{{ item.title }}</div>
          </template>
          <template #label>
            <van-grid :border="false" :column-num="item.cover.type">
              <van-grid-item
                v-for="(i, index) in item.cover.images"
                :key="index"
              >
                <van-image :src="i" Lazyload />
              </van-grid-item>
            </van-grid>
            <!-- 文字 -->
            <div class="meta">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ _formatTime(item.pubdate) }}</span>
              <!-- 叉号布局 -->
              <span
                class="close"
                @click.stop="showAction(item.art_id.toString())"
              >
                <van-icon name="cross"></van-icon>
              </span>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <van-popup
      v-model="showMoreAction"
      @close="actionClose"
      :style="{ width: '80%' }"
      get-container="body"
    >
      <more-action @dislike="dislikeAtticle"
@report ='hreportAtticle'
ref="moreAction"
      ></more-action>
    </van-popup>
  </div>
</template>

<script>
import { getArticles, dislikeArticle, reportArticle } from '@/api/article.js'
// import { formatTime } from '@/utils/formatTime.js'
import MoreAction from '@/views/Home/MoreAction.vue'
export default {
  name: 'ArticleList',
  components: {
    MoreAction
  },
  props: {
    channel: {
      type: Object
    }
  },
  data () {
    return {
      articleList: [],
      loading: false,
      finished: false,
      isLoading: false,
      showMoreAction: false,
      curArticleId: null // 缓存当前点击的文章id
    }
  },
  created () {
    this.hgetArticles()
  },
  methods: {
    godetail (id) {
      this.$router.push({
        path: '/articleDetail',
        query: {
          id
        }
      })
    },
    actionClose () {
      this.$refs.moreAction.isReport = false
    },
    hreportAtticle (type) {
      // send request
      reportArticle(this.curArticleId, type).then((res) => {
        console.log(res)
      })
      this.showMoreAction = false
      this.articleList.forEach((item, index) => {
        if (item.art_id.toString() === this.curArticleId) {
          this.articleList.splice(index, 1)
        }
      })
    },
    dislikeAtticle () {
      // send request
      dislikeArticle(this.curArticleId).then((res) => {
        // console.log(res)
      })
      this.showMoreAction = false
      this.articleList.forEach((item, index) => {
        if (item.art_id.toString() === this.curArticleId) {
          this.articleList.splice(index, 1)
        }
      })
    },
    showAction (id) {
      this.showMoreAction = true
      this.curArticleId = id
      // console.log(this.curArticleId)
    },
    // _formatTime (time) {
    //   return formatTime(time)
    // },
    async onRefresh () {
      const channelId = this.channel.id
      const res = await getArticles(channelId, Date.now())
      //   console.log(res.data.data.results)
      this.articleList.unshift(...res.data.data.results)
      this.isLoading = false
      this.$toast.success(`已刷新${res.data.data.results.length}条数据`)
    },
    async hgetArticles () {
      const channelId = this.channel.id
      const res = await getArticles(channelId, Date.now())
      //   console.log(res.data.data.results)
      this.articleList.push(...res.data.data.results)
      this.loading = false
      if (res.data.data.results.length === 0) {
        this.finished = true
      }
    },
    onLoad () {
      this.hgetArticles()
    }
  }
}
</script>

<style scoped lang="less">
.articlelist-container {
  // .meta span {
  //   margin-right: 10px;
  // }
  .meta {
    display: flex;
    span {
      margin-right: 10px;
    }
    .close {
      // 让它在最右边
      // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
      // 的最右边
      margin-left: auto;
    }
  }
}
</style>
